<template>
  <div>
    <div class="bluetop">
      <i class="hmtt hmtt-guanbi" @click="$router.back()"></i>
      <div class="zi">注册/登录</div>
    </div>
    <div class="form">
      <van-form @submit="onSubmit">
        <van-field
          v-model="user.mobile"
          name="验证码"
          placeholder="请输入手机号"
          :rules="mobilerules"
          type="number"
          maxlength="11"
        >
          <i slot="left-icon" class="hmtt hmtt-shouji van-field__left-icon"></i>
        </van-field>
        <van-field
          v-model="user.code"
          name="验证码"
          placeholder="请输入验证码"
          :rules="coderules"
          type="number"
          maxlength="11"
        >
          <i slot="left-icon" class="hmtt hmtt-yanzhengma"></i>
          <template #button>
            <button
              type="button"
              style="
                width: 77px;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                background-color: #07c160;
                color: #ffffff;
                border: 0px;
              "
            >
              获取验证码
            </button>
          </template>
        </van-field>
        <div style="margin: 16px">
          <van-button block type="info">登录</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/user";
import { setToken } from "@/utils/storage";

export default {
  data() {
    return {
      user: {
        mobile: "",
        code: "",
      },
      mobilerules: [
        {
          required: true,
          message: "手机号不能为空",
        },
        {
          pattern: /^1[3|5|7|8]\d{9}$/,
          message: "手机号格式错误",
        },
      ],
      coderules: [
        {
          required: true,
          message: "验证码不能为空",
        },
        {
          pattern: /^\d{6}$/,
          message: "验证码格式错误",
        },
      ],
    };
  },
  methods: {
    // tishi(message) {
    //   console.log(message);
    // },
    async onSubmit() {
      const user = this.user;
      const {
        data: { token },
      } = await login(user);
      setToken(token);
      // console.log(data.data.token);
      // console.log(await login(user));
      // console.log(user);
      this.$toast.success("登陆成功");
      this.$router.push("/wode");
    },
  },
};
</script>

<style lang="less" scoped>
.bluetop {
  .hmtt-guanbi {
    font-size: 12px;
    margin-left: 20px;
  }
  .zi {
    text-align: center;
    width: 225px;
    margin: 0px 75px 0px 55px;
  }
}
.form {
  .hmtt {
    color: #999999;
  }
}
</style>
